<template>
    <div class="app">

        <navbar class="navbarb">  
            <navbar-item type="left">
                <icon class="backIcon" @click="jumpenter" :eeui="{content:'md-arrow-back',fontSize:38}"></icon>
            </navbar-item>
            <navbar-item type="title">
                <text class="headtext">跑步详情</text>
            </navbar-item>
            <navbar-item type="right">
                <div class="iconBtn">
                    <image @click="openMask" class="appeal" src="../../assets/images/appeal.png" style="width:48px;height:52px"></image>
                    <image @click="openBottomPopup" class="share" src="../../assets/images/shareicon.png" style="width:40px;height:40px"></image>
                </div>
            </navbar-item>
        </navbar>
 <scroller>
        <div class="map">
            <image src="../../assets/images/mapr.jpg" style="width:750px;height:432px"></image>
        </div>
            <div class="infomoudle">
                <div class="distance">
                    <div class="disleft">
                        <div class="disup">
                            <text class="disnum">0.99</text>
                            <text class="danwei">公里</text>
                        </div>
                        <text class="distimes">2020年2月9日 13：21</text>
                        
                    </div>
                    <div class="disright">
                        <image class="avator" src="../../assets/images/avator.png" style="width:120px;height:120px"></image>
                        <text class="disrtext">燃燒卡路里</text>
                    </div>
                </div>
                <image class="manline" src="../../assets/images/manline.png" style="width:690px;height:27px"></image>

                <div class="sixnum">
                    <div class="sixnumitem sixnumborder">
                        <text class="sixnumup">04‘47“</text>
                        <text class="sixnumdown">平均配速</text>
                    </div>
                    <div class="sixnumitem sixnumborder">
                        <text class="sixnumup">00:27:15</text>
                        <text class="sixnumdown">时长</text>
                    </div>
                    <div class="sixnumitem">
                        <text class="sixnumup">534.8</text>
                        <text class="sixnumdown">千卡</text>
                    </div>
                    
                </div>
                <div class="sixnum sixnumline">
                    <div class="sixnumitem sixnumborder">
                        <text class="sixnumup sixnumupmr">27</text>
                        <text class="sixnumdown">步数</text>
                        <text class="sixnumdowndanwei">（步）</text>
                    </div>
                    <div class="sixnumitem sixnumborder">
                        <text class="sixnumup sixnumupmr">0.6</text>
                        <text class="sixnumdown">平均步频</text>
                        <text class="sixnumdowndanwei">（步/分钟）</text>
                    </div>
                    <div class="sixnumitem">
                        <text class="sixnumup sixnumupmr">122</text>
                        <text class="sixnumdown">平均步幅</text>
                        <text class="sixnumdowndanwei">（厘米）</text>
                    </div>
                    
                </div>
            </div>
             <div class="speedbox">
                <text class="partTit">配速</text>

                <div class="speedtab">
                    <text class="speedtabitem" style="margin-left:30;">公里</text>
                    <text class="speedtabitem">配速</text>
                </div>

                <div class="speedTimebar">
                    <div class="sbar">
                        <text class="sortnum">1</text>
                        <div class="bart">
                            <div class="innerbar" style="width:292;">
                                <text class="innerbartext">05‘24“</text>
                            </div>
                        </div>
                    </div>
                    <div class="sbar">
                        <text class="sortnum">2</text>
                        <div class="bart">
                            <div class="innerbar" style="width:292;">
                                <text class="innerbartext">05‘24“</text>
                            </div>
                        </div>
                    </div>
                    <div class="sbar">
                        <text class="sortnum">3</text>
                        <div class="bart">
                            <div class="innerbarwarn" style="width:242;">
                                <text class="innerbartext">04‘24“</text>
                            </div>
                        </div>
                    </div>
                    <div class="sbar">
                        <text class="sortnum">4</text>
                        <div class="bart">
                            <div class="innerbar" style="width:292;">
                                <text class="innerbartext">05‘24“</text>
                            </div>
                        </div>
                    </div>
                    <text class="donwtext">5公里 累计用时00：23：13</text>
                </div>
                <div class="speedTimebar">
                    <div class="sbar">
                        <text class="sortnum">1</text>
                        <div class="bart">
                            <div class="innerbar" style="width:292;">
                                <text class="innerbartext">05‘24“</text>
                            </div>
                        </div>
                    </div>
                    <div class="sbar">
                        <text class="sortnum">2</text>
                        <div class="bart">
                            <div class="innerbar" style="width:292;">
                                <text class="innerbartext">05‘24“</text>
                            </div>
                        </div>
                    </div>
                    <div class="sbar">
                        <text class="sortnum">3</text>
                        <div class="bart">
                            <div class="innerbarwarn" style="width:242;">
                                <text class="innerbartext">04‘24“</text>
                            </div>
                        </div>
                    </div>
                    <div class="sbar">
                        <text class="sortnum">4</text>
                        <div class="bart">
                            <div class="innerbar" style="width:292;">
                                <text class="innerbartext">05‘24“</text>
                            </div>
                        </div>
                    </div>
                    <text class="donwtext">10公里 累计用时00：50：13</text>
                    <text class="donwtext">最后不足一公里用时00：00：13</text>
                </div>
            </div>
             <div class="mapze">
        <div class="main">
            <text class="partTit">步频</text>
            <WEcharts class="echarts"></WEcharts>
        </div>
             </div>

              <div class="bottombtn">
                <text class="leftBtn" @click="qunomoral">确认异常</text>
                <text class="rightBtn" @click="jumpenter">正常</text>
            </div>
 </scroller>

     <!-- 申诉弹框 -->
        <wxc-mask height="500"
                width="600"
                top="100"
                border-radius="0"
                duration="200"
                mask-bg-color="#FFFFFF"
                :has-animation="hasAnimation"
                :has-overlay="true"
                :show-close="true"
                :show="maskShow"
                @wxcMaskSetHidden="wxcMaskSetHidden">
        <div class="content">
            <text class="maskTit">异常申请</text>
            <textarea class="textarea" placeholder="请输入反馈内容"></textarea>
            <button class="masksureBtn" :eeui="{text:'提交',fontSize:30,backgroundColor:'#08ce7f'}"></button>
        </div>
        </wxc-mask>

        <!-- sharepage -->
        <wxc-popup popup-color="#ffffff"
                :show="isBottomShow"
                @wxcPopupOverlayClicked="popupOverlayBottomClick"
                pos="bottom"
                height="300">
        <div class="popup-content">
            <div class="popupIConWarp">
                <div class="popupIConItem" @click="runsharepage(1)">
                    <text class="popupimgicon">&#xe60e;</text>
                    <text class="popupTit">图片分享</text>
                </div>
                <div class="popupIConItem" @click="runsharepage(2)">
                    <text class="popupimgicon popupimgicon2">&#xe672;</text>
                    <text class="popupTit" >长图分享</text>
                </div>
                
                
            </div>
            <text class="cancelBtn" @click="popupOverlayBottomClick">取消</text>
        </div>
      </wxc-popup>
    </div>
</template>

<style scoped>
.app {
  background-color: #ebebeb;
}
.navbarb {
  width: 750px;
  height: 100px;
  background-color: #1eb76e;
}
.headtext {
  font-size: 36px;
  color: #ffffff;
}
.iconBtn {
  flex-direction: row;
}
.share {
  margin-left: 21;
  margin-top: 5;
  margin-right: 30;
}
.map {
  width: 750;
  height: 432;
}
.infomoudle {
  width: 750;
  background-color: #ffffff;
}
.distance {
  width: 750;
}
.distance {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 30;
}
.disup {
  flex-direction: row;
}
.disnum {
  font-size: 75;
  font-weight: bold;
  margin-left: 30;
  margin-top: 20;
}
.danwei {
  font-size: 32;
  color: #6d6d6d;
  margin-top: 40;
  margin-left: 9;
  margin-bottom: 10;
}
.disright {
  margin-top: 7;
  margin-right: 30;
}
.distimes {
  font-size: 27;
  color: #6d6d6d;
  margin-left: 30;
}
.disrtext {
  font-size: 29px;
  color: #4e4e4e;
  margin-top: 7;
}
.manline {
  margin-left: 30;
  margin-bottom: 48;
}
.sixnum {
  flex-direction: row;
  width: 684;
  margin-left: 33;
}
.sixnumline {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dadada;
  padding-top: 20;
}
.sixnumup {
  font-size: 32;
  color: #4e4e4e;
  margin-bottom: 20;
  font-weight: bold;
}
.sixnumupmr {
  margin-bottom: 5;
}
.sixnumitem {
  width: 228;
  align-items: center;
  height: 100;
  justify-content: center;
  margin-bottom: 20;
}
.sixnumborder {
  border-right-width: 1;
  border-right-color: #dadada;
  border-right-style: solid;
}
.sixnumdown {
  color: #575757;
  font-size: 27;
}
.sixnumdowndanwei {
  font-size: 21;
  color: #575757;
  margin-top: 5;
}
.speedbox {
  background-color: #ffffff;
  margin-top: 10;
}
.partTit {
  font-size: 32;
  color: #1b1b1b;
  font-weight: bold;
  margin-top: 13;
  margin-left: 30;
  margin-bottom: 20;
}
.speedtab {
  flex-direction: row;
}
.speedtabitem {
  font-size: 27;
  color: #575757;
  margin-left: 47;
}
.sbar {
  flex-direction: row;
}
.sortnum {
  font-size: 24;
  color: #1b1b1b;
  font-weight: bold;
  margin-left: 52;
  margin-right: 53;
  height: 41;
  line-height: 41;
  margin-bottom: 10;
}
.bart {
  width: 602;
  height: 41;
  background-color: #ebebeb;
  border-radius: 4;
}
.innerbar {
  height: 41;
  background-color: #2edb7d;
  border-radius: 4;
}
.innerbarwarn {
  width: 222px;
  height: 41px;
  background-image: linear-gradient(to right, #fa914e, #ff0000);
  border-radius: 4px;
}
.innerbartext {
  margin-left: 30;
  font-size: 27;
  line-height: 41;
  color: #fff;
}
.speedTimebar {
  margin-top: 21;
}
.donwtext {
  font-size: 27;
  color: #575757;
  margin-top: 13;
  margin-left: 120;
}
.speedbox {
  padding-bottom: 20;
}
.mapze {
  background-color: #fff;
  margin-top: 10;
}
.main {
  flex: 1;
  justify-content: center;
  margin-bottom: 120;
}

.echarts {
  width: 750px;
  height: 750px;
}
.bottombtn {
  width: 750;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 90;
}
.leftBtn {
  width: 375;
  height: 90;
  background-color: #fff;
  line-height: 90;
  font-size: 32;
  text-align: center;
  color: #08ce7f;
}
.rightBtn {
  width: 375;
  height: 90;
  background-color: #08ce7f;
  line-height: 90;
  font-size: 32;
  text-align: center;
  color: #fff;
}
.maskTit{
  font-size: 30;
  margin-left: 30;
  margin-top: 20;
  margin-bottom: 20;
}
.textarea{
  width: 540;
  height: 300;
  border-width: 1px;
  border-style: solid;
  border-color: #c9c9c9;
  margin-left: 30;
  padding-left: 10;
  padding-top: 10;
  padding-right: 10;
  padding-bottom: 10;
}
.masksureBtn{
  width: 540;
  margin-left: 30;
  height: 80;
  margin-top: 10;
}
.backIcon{
  width: 60;
  height: 60;
  margin-left: 20;
  color: #fff;
}
.cancelBtn{
  width: 750;
  height: 70;
  font-size: 32;
  color: #999;
  line-height: 90;
  text-align: center;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #dadada;
}
.popupIConItem{
   width: 120;
   align-items: center;
}
.popupIConWarp{
  flex-direction: row;
  justify-content: space-around;
  padding-top: 20;
  padding-bottom: 30;
}
.popupimgicon{
  font-family: iconfont;
  font-size: 40;
  color: #fff;
  width: 120;
  height: 120;
  background-color: #08c1ce;
  border-radius: 100;
  text-align: center;
  line-height: 120;
}
.popupimgicon2{
  background-color: #0864ce;
}
.popupTit{
  font-size: 24;
  color: #666;
  margin-top: 10;
}
</style>

<script>

import WEcharts from "../components/WEcharts/index";
import { WxcMask,WxcPopup } from 'weex-ui';
export default {
  components: { WEcharts,WxcMask,WxcPopup },
  data() {
    return {
        isBottomShow: false,
        maskShow: false,
        overlayCanClose: true,
        isFalse: false,
        hasAnimation: true,
      
    };
  },
  methods:{
      qunomoral(){
        var self= this;
        eeui.confirm({
            title: "温馨提示",
            message: "你确定改学生此次成绩为异常吗？",
            buttons: ["取消", "确定"]
        }, function(result) {
            if (result.status == "click" && result.title == "确定") {
                //......
                self.jumpenter();
            }
        });
      },
      commitAL(){

      },
      runsharepage(val){
        eeui.openPage({
            url: 'runPages/runshare.js',
            statusBarColor:'#0d2236',
            pageName:'运动分享',
            animated:false,
            params:{type:val}
        }, function(result) {
            //......
        }); 
      },
      jumpenter(){
                eeui.openPage({
                    url: 'index.js',
                    statusBarColor:'#1eb76e',
                    pageName:'返回',
                    animated:false,
                    params:{tabnum:'runpage'}
                }, function(result) {
                    //......
                }); 
            },
            openMask (e) {
                this.maskShow = true;
                this.hasAnimation = true;
            },
            wxcMaskSetHidden () {
                this.maskShow = false;
            },
            openBottomPopup () {
                this.isBottomShow = true;
            },
            //非状态组件，需要在这里关闭
            popupOverlayBottomClick () {
                this.isBottomShow = false;
            }
            
        },
        created(){
        // 添加 字体图标
        let domModule = weex.requireModule('dom');
        domModule.addRule('fontFace',{
        'fontFamily': "iconfont",
        'src': "url('http://at.alicdn.com/t/font_1628280_p78f7z67jyq.ttf')"
        })

        
    }
};
</script>
